// 签到记录

<template>
    <f7-page class="signin-record">
        <f7-navbar>
            <f7-nav-left>
                <f7-link back
                         icon-material="arrow_back"></f7-link>
            </f7-nav-left>
            <f7-nav-title>签到记录</f7-nav-title>
            <f7-nav-right>
                <f7-icon f7="house"
                         @click.native="fnToHome()"></f7-icon>
            </f7-nav-right>
        </f7-navbar>

        <div class="content">
            <van-tabs @click="tabClick"
                      v-model="active"
                      color="#3385ff">
                <van-tab v-if="!BUILD_MANAGER"
                         :title="myTitle">
                    <div class="calendar-box">
                        <van-calendar title="日历"
                                      :default-date="defalutDate"
                                      @select="select"
                                      :formatter="formatter"
                                      color="#1890ff"
                                      :poppable="false"
                                      :show-confirm="false"
                                      :min-date="minDate"
                                      :max-date="maxDate"
                                      :className="'van-calendar__top-info'"
                                      :style="{ height: '100%' }">
                        </van-calendar>
                    </div>

                    <div class="signin fff"
                         v-if="currentDay">
                        <div class="signin-content">
                            <section>
                                <label>时间：</label>
                                <span>{{currentDay.createTime}}</span>
                            </section>
                            <section>
                                <label>地点：</label>
                                <span>{{currentDay.address}}</span>
                            </section>
                        </div>
                        <f7-picture-upload :key="currentDay.caseId"
                                           v-if="currentDay.caseId"
                                           style="margin: 0"
                                           :params="{type:'attach',dataKey: currentDay.caseId, bizType:'sign'}"
                                           :disabled="true"></f7-picture-upload>
                    </div>
                    <div class="signin fff"
                         style="justify-content: center;flex-direction: column;"
                         v-else>
                        <img src="@/assets/img/sign/zwrc.png"
                             alt="">
                        <span style="color: #61677A;">当天没有打卡记录～</span>
                    </div>
                </van-tab>
                <van-tab title="项目部记录">
                    <div class="search-bar">
                        <div class="search-left">
                            <f7-list inset>
                                <f7-list-input :value="search.query.keyword"
                                               @input="search.query.keyword = $event.target.value"
                                               type="text"
                                               placeholder="可输入姓名，单位名称，签到地点"
                                               clear-button>
                                </f7-list-input>
                            </f7-list>
                            <div @click="searchQuery">
                                <f7-icon slot="media"
                                         f7="search"></f7-icon>
                            </div>
                        </div>
                    </div>
                    <van-list v-model="loading"
                              :finished="finished"
                              finished-text="没有更多了"
                              @load="onLoad">
                        <f7-list media-list>
                            <f7-list-item @click="jumpTo(item)"
                                          v-for="(item, index) in queryList"
                                          :key="index">
                                <div class="list-item-content">
                                    <div class="name-row">
                                        <span class="name-left">{{item.createUserName ? item.createUserName.split('')[0] : ''}}</span>
                                        <span class="name-right">
                                            <div>
                                                <span class="item-name">{{item.createUserName}}</span><span v-if="item.personType"
                                                      class="tag">{{item.personType}}</span>
                                            </div>
                                            <f7-icon f7="chevron_right"></f7-icon>
                                        </span>
                                    </div>

                                    <div class="sections">
                                        <section>
                                            <label>联系电话：</label>
                                            <span>{{item.phone}}</span>
                                        </section>
                                        <section>
                                            <label>所属单位：</label>
                                            <span>{{item.orgName}}</span>
                                        </section>
                                        <section>
                                            <label>最近签到时间：</label>
                                            <span>{{item.createTime}}</span>
                                        </section>
                                    </div>
                                </div>
                            </f7-list-item>
                        </f7-list>
                    </van-list>
                </van-tab>
            </van-tabs>
        </div>

        <v-signin-navbar :engineeId="engineeId"></v-signin-navbar>

        <!-- 签到信息的弹出 -->
        <v-sign-info v-model="showSignInfo"
                     :model="currentDay"></v-sign-info>
        <!-- 签到信息的弹出 end -->
    </f7-page>
</template>

<script>
import controller from "@/libs/framework/controller"

import vSignInfo from './components/signInfo.vue'

export default class instance extends controller {
    onInit () {
        this.context.engineeId = this.$params.engineeId
        this.context.search.query.engineeId = this.$params.engineeId
    }
    mixin () {
        return {
            components: {
                vSignInfo
            },
            data () {
                return {
                    // 签到信息的弹出
                    showSignInfo: false,
                    active: 0,
                    myTitle: '我的记录',
                    defalutDate: new Date(),
                    search: {
                        start: 0,
                        length: 10,
                        query: {
                            keyword: '',
                            createTimeStart: '',
                            createTimeEnd: '',
                            engineeId: ''
                        },
                    },
                    recordsTotal: 0,
                    //
                    createTimeArr: [],
                    currentDay: {},
                    queryMyList: [],
                    //
                    queryList: [],
                    engineeId: '',
                    //
                    loading: false,
                    finished: false,
                }
            },
            created () {
                this.$util.getPromise(`/project/sign/queryMyList`, { engineeId: this.engineeId, beginDate: this.$formatter.formatStartDateTime(this.minDate), endDate: this.$formatter.formatStartDateTime(this.maxDate) }).then(result => {
                    if (result.parameters.queryMyList.length > 0) {
                        this.queryMyList = result.parameters.queryMyList
                        if (this.$formatter.formatStartDateTime(new Date()) == this.$formatter.formatStartDateTime(result.parameters.queryMyList[0].createTime)) {
                            this.currentDay = result.parameters.queryMyList[0]
                        }

                        this.createTimeArr = result.parameters.queryMyList.map(item => item.createTime)
                    }
                })
            },
            computed: {
                minDate () {
                    let date = new Date()
                    let lastDate = date.setFullYear(date.getFullYear() - 1)
                    return new Date(lastDate)
                    // let date = new Date()
                    // date.setDate(1) // 将当前时间的日期设置成第一天
                    // let year = date.getFullYear()  // 得到当前年份 
                    // let month = date.getMonth() + 1 // 得到当前月份（0-11月份，+1是当前月份）
                    // month = month > 10 ? month : '0' + month // 补零
                    // let day = date.getDate() // 得到当前天数，实际是本月第一天，因为前面setDate(1) 设置过了
                    // return new Date(year + '-' + month + '-' + day) // 这里传入的是字符串
                },
                maxDate () {
                    return new Date()
                },
                BUILD_MANAGER () {
                    let role = ['BUILD_MANAGER', 'IOS_ROLE']
                    role = role.map(item => {
                        item = item.toLowerCase()
                        return item
                    })
                    // 过滤出底部路由
                    if (this.$framework.account.hasRole(role)) {
                        return true
                    }
                    return false
                }
            },
            methods: {
                formatter (day) {
                    for (let i = 0; i < this.createTimeArr.length; i++) {
                        if (this.$formatter.formatStartDateTime(day.date) == this.$formatter.formatStartDateTime(this.createTimeArr[i])) {
                            day.bottomInfo = '已签到'
                        }
                    }
                    return day
                },
                select (day) {
                    this.currentDay = this.queryMyList.find(item => this.$formatter.formatStartDateTime(day) == this.$formatter.formatStartDateTime(item.createTime))
                    console.log(this.currentDay)
                },

                //
                onLoad () {
                    this.$util.getPromise(`/project/sign/query`, this.search).then(result => {
                        this.queryList.push(...result.data)
                        this.loading = false;
                        this.search.start = result.startIndex
                        this.recordsTotal = result.recordsTotal
                        if (this.queryList.length >= this.recordsTotal) {
                            this.finished = true;
                        }
                    })
                },
                searchQuery () {
                    this.loading = true;
                    this.queryList = []
                    this.search.start = 0
                    this.$util.getPromise(`/project/sign/query`, this.search).then(result => {
                        this.queryList = result.data
                        this.loading = false;
                        this.search.start = 0
                        this.recordsTotal = result.recordsTotal
                        if (this.queryList.length >= this.recordsTotal) {
                            this.finished = true;
                        }
                    })
                },
                jumpTo (item) {
                    this.$util.getPromise(`/project/sign/queryMyList`, { userId: item.createUserId, engineeId: this.engineeId, beginDate: this.$formatter.formatStartDateTime(this.minDate), endDate: this.$formatter.formatStartDateTime(this.maxDate) }).then(result => {
                        if (result.parameters.queryMyList.length > 0) {
                            this.defalutDate = new Date(item.createTime)
                            console.log(this.defalutDate)
                            this.queryMyList = result.parameters.queryMyList
                            this.queryMyList.forEach(day => {
                                if (this.$formatter.formatStartDateTime(this.defalutDate) == this.$formatter.formatStartDateTime(day.createTime)) {
                                    this.currentDay = day
                                }
                            })

                            console.log(this.currentDay, this.BUILD_MANAGER)

                            if (!this.BUILD_MANAGER) {
                                this.createTimeArr = result.parameters.queryMyList.map(item => item.createTime)
                                this.active = 0
                                this.myTitle = item.createUserName + '的记录'
                            } else {
                                this.showSignInfo = true
                            }
                        } else {
                            this.$f7.dialog.toast("获取不到该用户签到记录");
                        }
                    })
                },
                tabClick (name, title) {
                    if (name == 1) {
                        this.myTitle = '我的记录'
                        this.defalutDate = new Date()
                    } else if (name == 0) {
                        this.$util.getPromise(`/project/sign/queryMyList`, { engineeId: this.engineeId, beginDate: this.$formatter.formatStartDateTime(this.minDate), endDate: this.$formatter.formatStartDateTime(this.maxDate) }).then(result => {
                            if (result.parameters.queryMyList.length > 0) {
                                this.queryMyList = result.parameters.queryMyList
                                if (this.$formatter.formatStartDateTime(new Date()) == this.$formatter.formatStartDateTime(result.parameters.queryMyList[0].createTime)) {
                                    this.currentDay = result.parameters.queryMyList[0]
                                }

                                this.createTimeArr = result.parameters.queryMyList.map(item => item.createTime)
                            }
                        })
                    }
                }
            },
        }
    }
}
</script>

<style lang="less" scoped>
@deep: ~">>>";

.signin-record {
    .content {
        height: 100%;
        display: flex;
        flex-direction: column;

        @{deep}.van-tabs {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;

            .van-tabs__wrap {
                flex-shrink: 0;
            }

            .van-tabs__content {
                flex: 1;
                overflow: auto;

                .van-tab__pane:nth-of-type(1) {
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                }
            }
        }

        .calendar-box {
            flex: 1;
            overflow-y: auto;

            @{deep}.van-calendar__header-title {
                display: none;
            }
        }

        .signin {
            flex-shrink: 0;
            padding: 10px;
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .signin-content {
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
            }

            section {
                display: flex;

                label {
                    color: #888;
                }
            }

            > i {
                width: 60px;
                height: 40px;
                flex-shrink: 0;
                margin-left: 10px;
                background-color: #f5f7fa;
            }
        }

        .media-list {
            margin: 10px 0;

            @{deep}ul {
                background: none;
                padding: 0 20px;

                .media-item {
                    background-color: #fff;
                    border-radius: 16px;

                    & + .media-item {
                        margin-top: 10px;
                    }
                }
            }
        }

        .list-item-content {
            .name-row {
                display: flex;
                margin-bottom: 6px;

                > span.name-left {
                    width: 44px;
                    height: 44px;
                    border-radius: 100%;
                    background-color: #e9effb;
                    color: #3385ff;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 18px;
                    margin-right: 10px;
                    flex-shrink: 0;
                }

                > span.name-right {
                    flex: 1;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 6px 0;

                    .tag {
                        margin-left: 15px;
                        background-color: #f1f3f6;
                        border: none;
                        padding: 5px 6px;
                    }

                    .item-name {
                        font-size: 20px;
                        color: #242424;
                    }

                    .icon {
                        color: #ced6e0;
                        font-size: 20px;
                    }
                }
            }

            div.sections {
                display: flex;
                flex-direction: column;
                font-size: 14px;
                flex: 1;

                section {
                    display: flex;
                    padding: 6px 0;
                    font-size: 12px;

                    label {
                        color: #61677a;
                    }
                }
            }
        }
    }

    @{deep} .search-bar {
        display: flex;
        align-items: center;
        padding: 10px 20px;
        position: fixed;
        width: 100%;
        box-sizing: border-box;
        top: 88px;
        border-top: 1px solid #f0f2f5;
        z-index: 2;
        background-color: #fff;
        .search-left {
            display: flex;
            align-items: center;
            background-color: #f7f8fa;
            border-radius: 50px;
            padding: 0 10px;
            flex: 1;
        }
        .list.inset {
            margin: 0;
            flex: 1;
        }
        ul {
            flex: 1;

            > li {
                background-color: #f7f8fa;
            }
            .item-inner {
                padding-top: 3px;
                padding-bottom: 3px;
                flex-direction: row;
                align-items: center;
                .input-clear-button::before {
                    width: 28px;
                    height: 28px;
                    margin-left: -14px;
                    margin-top: -16px;
                }
                .icon {
                    margin-left: 10px;
                }
            }
        }
        .button-fill {
            margin: 0 10px;
        }
    }

    @{deep}.van-list {
        margin-top: 80px;
    }
}
</style>
